<template>
  <!-- 搜索结果排序 -->
  <div class="SearchSort w clearfix">
    <!--筛选工具栏-->
    <div class="filterbar">
      <div
        class="filteritem"
        id="1"
        :class="selected[0] ? 'selected' : ''"
        @click="isselected($event)"
      >
        <span class="key">销量</span>
        <em class="em-arrow"><i class="arrow"></i></em>
      </div>
      <div
        class="filteritem"
        id="2"
        :class="selected[1] ? 'selected' : ''"
        @click="isselected($event)"
      >
        <span class="key">新品</span>
        <em class="em-arrow"><i class="arrow"></i></em>
      </div>
      <div
        class="filteritem last"
        id="3"
        :class="selected[2] ? 'selected' : ''"
        @click="isselected($event)"
      >
        <span class="key">价格</span>
        <em class="em-arrow">
          <i class="arrow-top" :id="selectpriceup ? 'up' : false"></i>
          <i class="arrow-down" :id="selectpricedown ? 'down' : false"></i>
        </em>
      </div>
    </div>
    <!--价格输入-->
    <div class="price">
      <input type="text" placeholder="￥" v-model.number="minprice" />
      <span id="litile">-</span>
      <input type="text" placeholder="￥" v-model.number="maxprice" />
      <div class="price-button">
        <a href="javascript:void(0);" @click="limitprice">确定</a>
      </div>
    </div>
    <!--结果数量-->
    <div class="result_num">
      共计 <span>{{ resultnumber }}</span> 商品
    </div>
  </div>
  <div class="SearchResult w">
    <!--搜索结果-->
    <div class="result clearfix">
      <ul>
        <div>
        <li class="Gooditem_li" v-for="item in curGoods" :key="item.index">
          <GoodItem :item="item" v-if="reload"/>
        </li>
        </div>
      </ul>
    </div>
    <div class="page">
      <!-- 分页 -->
      <el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next" v-model:page-count="totalPage" v-model:current-page="curPage" :page-size="pageSize">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import GoodItem from "../components/Searchitem.vue";

export default {
  components: {
    GoodItem,
  },
    props: {
    FilterProductlist: Array,
  },
  data() {
    return {
      Productlist:this.FilterProductlist,
      selected: [true, false, false],
      selectpriceup: false,
      selectpricedown: false,
      minprice: "",
      maxprice: "",
      sort: "销量",
      resultnumber: 0,
      reload:true,
      curGoods: [],
      searchResultGoods:[],
      totalPage: 3,
      pageSize:10,
      curPage:1
    };
  },
  methods: {
    //被点击选中排序条件
    isselected(e) {
      this.modifyselect(e.currentTarget.id);
    },
    //修改筛选按钮状态
    modifyselect(id) {
      let newindex = parseInt(id) - 1;
      this.selected[newindex] = true;
      for (let i in this.selected) {
        if (i != newindex) {
          this.selected[i] = false;
        }
      }
      this.modifysort(id);
      if (id == 3) {
        this.modifyselectprice();
      } else {
        this.selectpriceup = false;
        this.selectpricedown = false;
      }
    },
    //判断价格升序降序改变图标样式
    modifyselectprice() {
      if (this.selectpriceup == false && this.selectpricedown == false) {
        this.selectpriceup = true;
        this.Productlist=this.Productlist.sort(this.sortprice(true));
        this.sort = "价格升序";
      } else {
        this.selectpriceup = !this.selectpriceup;
        this.selectpricedown = !this.selectpricedown;
        if (this.selectpriceup) {
        this.Productlist=this.Productlist.sort(this.sortprice(true));
        window.console.log(this.Productlist);
        this.sort = "价格升序";
        } else {
        this.Productlist=this.Productlist.sort(this.sortprice(false));
        this.sort = "价格降序";
        }
      }
    },
    //判断排序选择并修改排序条件
    modifysort(id) {
      if (id == 1) {
        this.sort = "销量";
      } else if (id == 2) {
        this.sort = "新品";
      }
    },
    //确定价格区间
    limitprice() {
      if (this.minprice != "" && this.maxprice != "") {
        let rule = /^[0-9]*$/;
        if (rule.test(this.minprice) && rule.test(this.maxprice)) {
          if (this.minprice > this.maxprice) {
            let temp = this.minprice;
            this.minprice = this.maxprice;
            this.maxprice = temp;
            this.$message.warning('已帮你置换了价格区间');
          }
           this.Productlist=this.Productlist.filter(item=>{
              return this.minprice<item.goodsPrice&&item.goodsPrice<this.maxprice;
           });
           this.refreshSearchResult();
          this.$message.success('筛选成功');
        } else {
          this.minprice = "";
          this.maxprice = "";
          this.$message.error('请输出数字');
        }
      } else {
        this.$message.warning('你完全没有输出价格区间嘛');
        this.minprice = "";
        this.maxprice = "";
      }
    },
    //获取搜索结果
    refreshSearchResult() {
      this.searchResultGoods =this.Productlist;
      this.resultnumber=Object.keys(this.Productlist).length;
      if(this.resultnumber==0){
          this.totalPage=1;
          this.refreshCurrentSearchResult();
      }else{
      this.totalPage=Math.ceil(this.resultnumber/this.pageSize);
      this.refreshCurrentSearchResult();
      }
    },
    //页面发送变化
    handleCurrentChange(){
      this.refreshCurrentSearchResult();
    },
    //搜索结果分页
    refreshCurrentSearchResult(){
      let j = 0;
      for (let i = (this.curPage - 1) * this.pageSize; i < this.curPage * this.pageSize; i++) {
        if (i < this.Productlist.length) {
          //console.log("页数变动" + this.curPage);
          this.curGoods[j]=this.Productlist[i];
        }else{
          this.curGoods.splice(j,j+1);
        }
        j++;
      }
      this.reloadresult();
    },
    //销毁原商品组件重新创建
    async reloadresult() {
      this.reload = !this.reload;
      await this.$nextTick();
      this.reload = !this.reload;
    },
    sortprice(desc){
      return function(a,b){
        if(desc){
          return a.goodsPrice-b.goodsPrice;
        }else{
          return b.goodsPrice-a.goodsPrice
        }
      }
    }
  },
  mounted() {
    this.refreshSearchResult();
  },
  watch: {
    sort(){
      this.refreshSearchResult();
      this.curPage=1;
    },
    FilterProductlist(){
       this.Productlist=this.FilterProductlist;
       this.refreshSearchResult();
    },
  },
};
</script>

<style scoped>
.w {
  width: 1300px;
  margin: 0 auto;
}
.clearfix {
  *zoom: 1;
}
.clearfix:after {
  visibility: hidden;
  clear: both;
  display: block;
  content: ".";
  height: 0;
}
.filterbar {
  float: left;
  margin-left: 75px;
  margin-top: 55px;
}
.filterbar .filteritem {
  display: inline-block;
  border: 1px solid gray;
  border-right: none;
  line-height: 22px;
  width: 60px;
  text-align: center;
}
.filterbar .last {
  border-right: 1px solid gray;
  margin-right: 115px;
}
.filterbar .key {
  display: inline-block;
  margin: auto 5px;
  vertical-align: top;

  /* 禁止文本选中 */
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
.filterbar .em-arrow {
  display: inline-block;
  width: 7px;
  margin-left: 5px;
  vertical-align: top;
}
.filterbar .arrow {
  float: left;
  width: 7px;
  overflow: hidden;
  background: url(../assets/sprite-arrow.png) no-repeat 0 -100px;
  background-position: 0 -100px;
  height: 11px;
  margin-top: 6px;
}
.filterbar .arrow-top {
  float: left;
  width: 7px;
  overflow: hidden;
  background: url(../assets/sprite-arrow.png) no-repeat 0 -100px;
  background-position: -10px -100px;
  height: 4px;
  margin-top: 6px;
}
.filterbar #up {
  background-position: -10px -120px;
}
.filterbar .arrow-down {
  float: left;
  width: 7px;
  overflow: hidden;
  background: url(../assets/sprite-arrow.png) no-repeat 0 -100px;
  background-position: -10px -110px;
  height: 4px;
  margin-top: 6px;
}
.filterbar #down {
  background-position: -10px -130px;
}

.selected {
  background-color: #005aa0;
  color: white;
}
.selected .arrow {
  background-position: 0 -120px;
}

.price {
  float: left;
  margin-top: 55px;
}
.price input {
  outline: 1px solid gray;
  height: 20px;
  width: 45px;
  padding: 2px 5px;
}
.price a {
  text-decoration: none;
}
.price #litile {
  margin: auto 5px;
}
.price .price-button {
  display: inline-block;
  margin-left: 15px;
}
.price .price-button a {
  color: #005aa0;
}
.price .price-button a:hover {
  color: red;
}

.result_num {
  float: right;
  margin-top: 55px;
  margin-right: 155px;
  font-size: 16px;
}

.result {
  width: 1200px;
  margin: 45px auto;
}
.result .Gooditem_li {
  background: #fff;
  margin-right: 10px;
  float: left;
  list-style: none;
}
.page {
  text-align: center;
}
</style>